<template>
<div class="cart">
    <Tips></Tips>
    <van-checkbox-group v-model="result" ref="checkboxGroup" :disabled="isEdit">
        <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id" @click="checkedChange(item)">
            <van-swipe-cell>
                <van-card :num="item.number" :price="item.retail_price" :title="item.goods_name" :thumb="item.list_pic_url" />
                <van-stepper v-model="item.number" v-show="isEdit" @change="stepperChange(item)" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="delGood(item.product_id)" />
                </template>
            </van-swipe-cell>
        </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" :disabled="isEdit">全选</van-checkbox>
        <template #tip>
            <p class="goodsInfo">累计共<span>{{cartTotal.checkedGoodsCount}}</span>件商品，可点击<van-button :type="isEdit? 'danger':'primary'" size="small" @click="isEdit = !isEdit">{{isEdit? '完成编辑':'编辑'}}</van-button>按钮进行商品数量修改</p>
        </template>
    </van-submit-bar>
</div>
</template>

<script>
import Tips from '../../components/Tips.vue'
export default {
    components: {
        Tips
    },
    data() {
        return {
            result: ['1'],
            cartList: [],
            cartTotal: [],
            isEdit: false
        }
    },
    created() {
        this.getCartList()
    },
    computed: {
        checkedAll: {
            get() {
                return this.result.length == this.cartList.length
            },
            async set(val) {
                let ids_arr = []
                this.cartList.map(item => {
                    ids_arr.push(item.product_id)
                })
                const res = await this.$http.post('/cart/checked', {
                    isChecked: val ? 1 : 0,
                    productIds: ids_arr.join(),
                })
                if (res.data.errno == 0) {
                    this.totalFun(res.data.data)
                }
            }
        }
    },
    methods: {
        async delGood(pid) {
            const res = await this.$http.post('/cart/delete', {
                productIds: pid.toString()
            })
            if (res.data.errno == 0) {
                this.$toast.success('删除成功!')
                this.totalFun(res.data.data)
            }
        },
        async stepperChange(item) {
            const res = await this.$http.post('/cart/update', {
                goodsId: item.goods_id,
                id: item.id,
                number: item.number,
                productId: item.product_id
            })
            if (res.data.errno == 0) {
                this.totalFun(res.data.data)
            }
        },
        async getCartList() {
            const res = await this.$http.get('/cart/index')
            if (res.data.errno == 0) {
                this.totalFun(res.data.data)
            }
        },
        totalFun(data) {
            this.cartList = data.cartList
            this.cartTotal = data.cartTotal
            this.result = []
            this.cartList.forEach(item => {
                if (item.checked) {
                    this.result.push(item.id)
                }
            })
        },
        onSubmit() {
            this.$toast.loading('功能有待开发')
        },
        async checkedChange(item) {
            if (this.isEdit) return
            const res = await this.$http.post('/cart/checked', {
                isChecked: item.checked == 0 ? 1 : 0,
                productIds: item.product_id,
            })
            if (res.data.errno == 0) {
                const {
                    cartList
                } = res.data.data
                this.cartList = cartList
            }
        }
    }
}
</script>

<style lang="less" scoped>
.van-checkbox-group {
    background-color: #fff;

    .van-checkbox {
        padding: .1rem .15rem;
        border-bottom: 1px solid #ccc;

        /deep/.van-checkbox__label {
            flex: 1;
        }
    }
}

.van-submit-bar {
    bottom: .5rem;
    border-bottom: 1px solid #ccc;
}

.van-swipe-cell {
    position: relative;

    .van-stepper {
        position: absolute;
        right: 0;
        bottom: .05rem;
    }
}

.delete-button {
    height: 100%;
    right: -.01rem;
}

.goodsInfo {
    text-align: center;
    height: 30px;
    line-height: 30px;
}
.van-button--small{
    top: -.04rem;
}
</style>
